<template>
	<view class="content">
		<view class="inner">
			<!-- 标题 -->
			<view class="title">{{trendsInfo.title}}</view>
			<!-- 阅览量和时间 -->
			<view class="reads_time">
				<!-- 阅览量 -->
				<view class="reads">阅览量：{{trendsInfo.reads_count}}</view>
				<!-- 时间 -->
				<view class="time">
					发布时间：{{trendsInfo.time}}
				</view>
			</view>

			<!-- 封面 -->
			<view class="cover_photo" v-if="trendsInfo.coverPhoto">
				<image :src="trendsInfo.coverPhoto" mode="" class="photo"></image>
			</view>
			<!-- 内容 -->
			<view class="inner_content">
				{{trendsInfo.content}}
			</view>
		</view>

	</view>
</template>

<script>
	import {
		momnetTime
	} from '../../utils/time.js'
	import {
		getTrendsDetail,
		addReads
	} from '../../api/trends.js'
	export default {
		data() {
			return {
				id: "",
				trendsInfo: {},

			};
		},
		onLoad(options) {
			this.id = options.id
			this.handleTrendsDetail()
			this.handleAddReads()
		},

		created() {

		},
		methods: {
			handleAddReads() {
				addReads({
					trendsId: this.id
				}).then(res => {})
			},
			handleTrendsDetail() {
				getTrendsDetail({
					trendsId: this.id
				}).then(res => {
					console.log(res);
					this.trendsInfo = res.data
					this.trendsInfo.time = momnetTime(res.data.createTime)
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		box-sizing: border-box;
		padding: 20upx;

		.inner {
			box-sizing: border-box;
			padding: 20upx;
			width: 100%;
			min-height: 90vh;
			background-color: #fff;
			box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
			border-radius: 20upx;

			.title {
				font-size: 18px;
				font-weight: 700;

			}

			.reads_time {
				font-size: 12px;
				color: #afafaf;
				margin-top: 20upx;
				display: flex;
				justify-content: flex-start;

				.reads {
					margin-right: 20upx;
				}

				.time {}
			}


			.cover_photo {
				width: 100%;
				height: 300upx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				.photo {
					width: 90%;
					height: 100%;
					margin-top: 30upx;
				}


			}

			.inner_content {
				margin-top: 30upx;
			}
		}

	}
</style>